const path = require("path");
const webpack = require("webpack");
const CompressionWebpackPlugin = require("compression-webpack-plugin");
const productionGzipExtensions = ["js", "css"];

function resolve(dir) {
  return path.join(__dirname, "./", dir);
}

function isProd() {
  return (
    process.env.NODE_ENV === "production" ||
    process.env.VUE_APP_PREVIEW === "true"
  );
}

const assetsCDN = {
  css: [],
  js: [
    // "//cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.min.js",
    // "//cdn.jsdelivr.net/npm/vue-router@3.2.0/dist/vue-router.min.js",
    // "//cdn.jsdelivr.net/npm/vuex@3.4.0/dist/vuex.min.js",
    // "//cdn.jsdelivr.net/npm/axios@0.20.0/dist/axios.min.js",
  ],
};

const prodExternals = {};

module.exports = {
  publicPath: "/",
  outputDir: "dist",
  assetsDir: "static",
  productionSourceMap: false,
  lintOnSave: false,
  transpileDependencies: ["webpack-dev-server/client"],
  configureWebpack: {
    plugins: [
      new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),

      new CompressionWebpackPlugin({
        // 提供带 Content-Encoding 编码的压缩版的资源
        // filename: '[path].gzip[query]',   // 提示compression-webpack-plugin@2.0.0的话filename改为asset
        algorithm: "gzip",
        deleteOriginalAssets: false, // 否删除原资源
        test: new RegExp("\\.(" + productionGzipExtensions.join("|") + ")$"), // 处理所有匹配此 {RegExp} 的资源
        threshold: 10240, // 只处理比这个值大的资源。按字节计算 // 内容超过10KB进行压缩
        minRatio: 0.8, // 只有压缩率比这个值小的资源才会被处理
      }),

      new webpack.ProvidePlugin({
        // 自动加载模块，而不必到处 import 或 require
        jQuery: "jquery",
        $: "jquery",
        _: "lodash",
        moment: "moment",
      }),
    ],

    externals: isProd() ? prodExternals : {},
  },

  chainWebpack: (config) => {
    // config.entry.app = ['babel-polyfill', './src/main.js']
    config.resolve.alias
      .set("@a", resolve("src/assets"))
      .set("@c", resolve("src/components"))
      .set("@v", resolve("src/views"));

    if (isProd()) {
      config.plugin("html").tap((args) => {
        args[0].cdn = assetsCDN;
        return args;
      });
    }
  },

  css: {
    loaderOptions: {
      less: {
        modifyVars: {
          /* less 变量覆盖 */
          "primary-color": "#1890FF",
          "link-color": "#1890FF",
          "border-radius-base": "4px",
        },
        javascriptEnabled: true,
      },
      postcss: {
        // 这里的选项会传递给 postcss-loader
        plugins: [
          // require("postcss-plugin-px2rem")({
            // rootValue: 100, // 换算基数
            // unitPrecision: 5, //允许REM单位增长到的十进制数字。
            //propWhiteList: [],  //默认值是一个空数组，这意味着禁用白名单并启用所有属性。
            // propBlackList: [], //黑名单
            // exclude: /(node_module)|(admin)|(display)|(index)|(manage)|(components)/, //默认false，可以（reg）利用正则表达式排除某些文件夹的方法，例如/(node_module)/ 。如果想把前端UI框架内的px也转换成rem，请把此属性设为默认值
            // selectorBlackList: [], //要忽略并保留为px的选择器
            // ignoreIdentifier: false,  //（boolean/string）忽略单个属性的方法，启用ignoreidentifier后，replace将自动设置为true。
            // replace: true, // （布尔值）替换包含REM的规则，而不是添加回退。
            // mediaQuery: false, //（布尔值）允许在媒体查询中转换px。
            // minPixelValue: 3, //设置要替换的最小像素值(3px会被转rem)。 默认 0
          // }),
        ],
      },
    },
  },

  devServer: {
    disableHostCheck: false,
    port: 8080,
    open: true,
    // proxy: '10.207.47.204:8909',
    proxy: {
      "/waybill": {
        target: 'http://10.207.47.205:8080/',
        changeOrigin: true, // 在本地会创建一个虚拟服务端，然后发送请求的数据，并同时接收请求的数据，这样服务端和服务端进行数据的交互就不会有跨域问题
        pathRewrite: {
          '^/waybill': 'waybill'
        }
      },
    },
  }
};
